<script setup>
import { ref , toRefs , watch } from 'vue';
import { useScrollText } from './useScrollText'

const props = defineProps({
  text: {
    type: String,
    default: ""
  },
  speed: {
    type: Number,
    default: 1
  }
})

const { text,speed } = toRefs(props)

const scrollStyles = ref({})

watch(() =>text.value , () => {
  const { scrollStyle } = useScrollText(text.value , speed.value);
  scrollStyles.value = scrollStyle
} , { deep: true })
</script>

<template>
  <div class="scroll-container">
    <div class="scroll-text" :style="scrollStyles">
      {{ text }}
    </div>
  </div>
</template>

<style lang="scss">
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 50px;
}

.scroll-text {
  display: inline-block;
  will-change: transform;
}
</style>
